<template>
  <section class="article-list col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-12 q-mb-md q-pt-md">
    <div class="row q-pb-sm items-center">
      <h2 class="size-24 title col text-shadow-white">{{ title }}</h2>
      <!--<div class="size-14 text-grey-8">更多</div>-->
    </div>
    <div class="q-mt-md">
      <q-btn
        v-for="(tag, index) in displayTags"
        :key="index"
        :label="tag"
        color="blue-1"
        text-color="primary"
        class="button-tag q-ma-xs"
        @click="toTag(tag)"
        rounded></q-btn>
    </div>
  </section>
</template>

<script>
    export default {
      name: 'aTags',
      props: {
        tags: {
          type: [Array, String],
          required: true
        },
        title: {
          type: String,
          required: true
        },
        model: {
          type: String,
          required: false
        }
      },
      data () {
        return {
        }
      },
      computed: {
        displayTags(){
          const tags = this.tags
          return typeof tags === 'string' && tags.length > 0 ? tags.split(',') : tags
        }
      },
      methods: {
        toTag(tag){
          const path = `/tag/${tag}/`
          const query = this.model ? {model: this.model} : {}
          console.log(query)
          this.$router.push(path, query)
        }
      }
    }
</script>
